<template>
  <div class="box">
    <div class="descriptions">
      <div class="user-title-box">结算单信息</div>
      <el-descriptions :column="4" border>
        <el-descriptions-item label="基础装修费">{{
          jsdData.settlement_basic_decoration_fee ? jsdData.settlement_basic_decoration_fee + "元" : "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="主材采购费">{{
          jsdData.settlement_material_costs ? jsdData.settlement_material_costs + "元" : "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="管理成本">{{
          jsdData.management_costs ? jsdData.management_costs + "元" : "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="现场采购成本">{{
          jsdData.procurement_cost ? jsdData.procurement_cost + "元" : "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="公司集采成本">{{
          jsdData.centralized_procurement_cost
            ? jsdData.centralized_procurement_cost + "元"
            : "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="税金">{{
          jsdData.settlement_taxes ? jsdData.settlement_taxes + "元" : "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="应结算金额">{{
          jsdData.settlement_amount ? jsdData.settlement_amount + "元" : "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="实际结算金额">{{
          jsdData.actual_settlement_amount ? jsdData.actual_settlement_amount + "元" : "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="结算报价金额">{{
          jsdData.settlement_quotation_amount
            ? jsdData.settlement_quotation_amount + "元"
            : "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="成本金额">{{
          jsdData.settlement_cost_amount
            ? jsdData.settlement_cost_amount + "元"
            : "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="利润率">{{
          jsdData.settlement_profit_margin
            ? jsdData.settlement_profit_margin + "%"
            : "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="结算文件" :span="2">
          <div class="file-box-img-box flex ac">
            <template v-for="(file, idx) in jsdData.settlement_file">
              <div class="file-box-img" :key="idx">
                <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top">
                  <img @click="$fileViewHandle(file)" class="img" :src="$fileImgFunc(file)" />
                </el-tooltip>
              </div>
            </template>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="工程量清单" :span="2">
          <div class="file-box-img-box flex ac">
            <template v-for="(file, idx) in jsdData.inventory_file">
              <div class="file-box-img" :key="idx">
                <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top">
                  <img @click="$fileViewHandle(file)" class="img" :src="$fileImgFunc(file)" />
                </el-tooltip>
              </div>
            </template>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="利润单文件" :span="2">
          <div class="file-box-img-box flex ac">
            <template v-for="(file, idx) in jsdData.profit_statement_file">
              <div class="file-box-img" :key="idx">
                <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top">
                  <img @click="$fileViewHandle(file)" class="img" :src="$fileImgFunc(file)" />
                </el-tooltip>
              </div>
            </template>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="descriptions">
      <div class="user-title-box">审核操作</div>
      <el-form :model="shjsdRuleForm" :rules="shjsdRules" ref="shjsdRuleForm" label-position="top">
        <el-form-item label="" prop="reviewPassed">
          <el-radio-group v-model="shjsdRuleForm.reviewPassed" size="small">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="拒绝理由" prop="remark" v-if="shjsdRuleForm.reviewPassed == 2">
          <el-input :rows="4" class="input-box" v-model="shjsdRuleForm.remark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="shjsdSubmit('shjsdRuleForm')" :disabled="diaLoading"
          :loading="diaLoading">提交</el-button>
        <el-button @click="shjsdCancel('shjsdRuleForm')">关闭</el-button>
      </span>
    </div>
  </div>
</template>
<script>
import projectApi from "@/api/projectApi";
import adminApi from "@/api/adminApi";
import { getUserInfo } from "@/utils/auth";

export default {
  name: "shjsdCom",
  data() {
    return {
      shjsdRuleForm: {
        remark: "",
        reviewPassed: 1,
      },
      shjsdRules: {},
      diaLoading: false,
      jsdData: "",
    };
  },
  watch: {},
  computed: {},
  mounted() {
    this.project_id = this.$route.query.id;
    this.getProjectLog();
  },
  methods: {
    shjsdCancel(formName) {
      this.$goBackTab(this);
    },
    shjsdSubmit(formName) {
      let shjsdRuleForm = this.shjsdRuleForm;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.diaLoading = true;
          if (shjsdRuleForm.reviewPassed == 2) {
            projectApi
              .settlementStatementRejected({
                project_id: this.project_id,
                remark: shjsdRuleForm.remark,
              })
              .then((res) => {
                console.log(res, "审核结算单");
                this.diaLoading = false;
                if (res.code == 200) {
                  this.shjsdCancel();
                }
                this.$message({
                  type: res.code == 200 ? "success" : "warning",
                  message: res.code == 200 ? "处理成功" : res.message,
                });
              })
              .catch((err) => {
                this.diaLoading = false;
                this.$message({
                  type: "warning",
                  message: err.message,
                });
              });
            return;
          }
          projectApi
            .settlementStatementPassed({
              project_id: this.project_id,
              remark: shjsdRuleForm.remark,
              audit_type: 1
            })
            .then((res) => {
              console.log(res, "审核结算单");
              this.diaLoading = false;
              if (res.code == 200) {
                this.shjsdCancel();
              }
              this.$message({
                type: res.code == 200 ? "success" : "warning",
                message: res.code == 200 ? "处理成功" : res.message,
              });
            })
            .catch((err) => {
              this.diaLoading = false;
              this.$message({
                type: "warning",
                message: err.message,
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 获取项目日志
    getProjectLog() {
      projectApi
        .getProjectLogList({
          project_id: this.$route.query.id,
          log_type: 0,
        })
        .then((res) => {
          console.log(res, "项目日志");
          if (res.code == 200) {
            res.data.forEach((item) => {
              if (item.form_data) {
                item.form_data = JSON.parse(item.form_data);
              }
              // 拿最新一条结算单数据（审核用）
              if (item.log_status == 380 && !this.jsdData) {
                this.jsdData = item.form_data;
              }
            });
          }
        })
        .catch((err) => { });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/shPage.scss";
</style>